<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}



		.son1,
		.son2 {
			width: 100px;
			height: 100px;
			background-color: aqua;
			/*1. 父亲盒子不给高度我们想让儿子的高度撑开父亲的高度。
			我们的儿子给了浮动后,那么父亲的高度就不会被撑开了,因为
			 浮动后的元素会脱离文档流。
			 */
			float: left;
		}

		.son2 {
			background-color: blue;
		}

		.box {
			width: 300px;
			background-color: red;
			/* 
			解决方式1：
			可以解决这个问题，优点写法简单，好记。缺点是这个方式会隐藏溢出，
			
			overflow: hidden;
			 */

		}

		/* 解决方式2：
			 使用伪元素会有兼容性的问题
			
		.box::after {
			content: '';
			display: block;
			clear: both;
			visibility: hidden;
		}
		 */

		/* 解决方式3：
			使用双伪也会有兼容性的问题
		
		.box::after,
		.box::before {
			display: table;
			content: '';
		}

		.box::after {
			clear: both;
		}
		 */

		/* 
		 解决方式4：
		 使用隔墙方式是需要在最后浮动儿子元素添加一个块级元素（有点捞，还要去手动添加一个元素再来写样式）
		.clearBox {
			clear: both;
		}
		 */
	</style>
	<body>
		<div class="box">
			<div class="son1"></div>
			<div class="son2"></div>
			<div class="clearBox"></div>
		</div>

	</body>


	<script>

	</script>
</html>